<template>
    <div>
        <div id="wangeditor" ref="wangeditor"></div>
    </div>
</template>
<script>
// 参考地址
// https://www.jianshu.com/p/52852d39f869
// https://www.kancloud.cn/wangfupeng/wangeditor3/338872
// http://www.wangeditor.com/
// http://www.wangeditor.com/doc/
// xss攻击
// https://jsxss.com/zh/index.html
// const xss = require('xss');
import E from "wangeditor";
export default {
    name: "wang-editor",
    data() {
        return {
            editor: null,
            editorCont: "",
            dialogVisible: false,
            imgsData: {
                imageUrl: "",
                imageId: "",
                link: "",
            },
        };
    },
    props: {
        setCont: {
            type: Function,
            default: () => {
                console.log("未注册设置内容(setCont)事件");
            },
        },
        getCont: [Function, null],
        content: {
            type: String,
            default: "",
        },
    },
    watch: {
        content: {
            immediate: true,
            handler(html) {
                if (this.editorCont != html) {
                    if (html === "<p><br></p>") html = "";
                    this.editorCont = html;
                    this.editor && this.editor.txt.html(html);
                    this.setCont(html);
                }
            },
        },
        dialogVisible(bool) {
            if (!bool) {
                this.imgsData.imageUrl = "";
                this.imgsData.imageId = "";
                this.imgsData.link = "";
            }
        },
    },
    mounted() {
        this.editor = new E(this.$refs.wangeditor);
        this.fixLinkPanel();
        // 编辑器的事件，每次改变会获取其html内容
        this.editor.config.onchange = (html) => {
            if (!!html && html === "<p><br></p>") {
                //过滤编辑器内容清除后遗留标签
                html = "";
            }
            this.editorCont = html;
            //防xss攻击
            //具体白名单规则查看如下：xss.prototype.whiteList
            // console.log(xss.prototype);
            // this.setCont(
            // 	xss(html, {
            // 		//白名单
            // 		whiteList: {
            // 			iframe: ['frameborder', 'src', 'allowFullScreen', 'width', 'height'],
            // 		},
            // 	})
            // );
            this.setCont(html);
        };
        //设置编辑器基本信息
        this.setEditor();
        if (this.editorCont) {
            this.editorCont = this.editorCont;
            this.editor.txt.html(this.editorCont);
        }
    },
    methods: {
        setEditor() {
            //菜单配置
            this.editor.config.menus = [
                "bold", // 粗体
                "fontSize", // 字号
                "fontName", // 字体
                "italic", // 斜体
                "underline", // 下划线
                "strikeThrough", // 删除线
                "foreColor", // 文字颜色
                "link", // 插入链接
                "justify", // 对齐方式
                // "image", // 插入图片
                // "video" //插入视频
            ];
            //颜色设置
            this.editor.config.colors = [
                "#000",
                "#e60000",
                "#ff9900",
                "#ffff00",
                "#008a00",
                "#0066cc",
                "#9933ff",
                "#ffffff",
                "#facccc",
                "#ffebcc",
                "#ffffcc",
                "#cce8cc",
                "#cce0f5",
                "#ebd6ff",
                "#bbbbbb",
                "#f06666",
                "#ffc266",
                "#ffff66",
                "#66b966",
                "#66a3e0",
                "#c285ff",
                "#888888",
                "#a10000",
                "#b26b00",
                "#b2b200",
                "#006100",
                "#0047b2",
                "#6b24b2",
                "#444444",
                "#5c0000",
                "#663d00",
                "#666600",
                "#003700",
                "#002966",
                "#3d1466",
            ];
            //是否隐藏上传网图
            // this.editor.config.showLinkImg = false;
            // 使用 base64 保存图片
            // this.editor.config.uploadImgShowBase64 = true;
            //七牛云
            this.editor.config.qiniu = true;
            //忽略粘贴内容中的图片
            this.editor.config.pasteIgnoreImg = true;
            //清除所有标签
            // this.editor.config.pasteTextHandle = function (pasteStr) {
            //     const content = util.removeStrTag(util.removeStrJs(pasteStr));
            //     console.log(content)
            //     // 对粘贴的文本进行处理，然后返回处理后的结果
            //     return content
            // }
            this.editor.create(); // 创建富文本实例
        },
        //暴力解决panel链接值为null
        fixLinkPanel() {
            let _this = this;
            this.$nextTick(() => {
                this.editor.$toolbarElem.elems[0].childNodes[7].addEventListener(
                    "click",
                    function () {
                        let linkValue =
                            _this.editor.$textContainerElem[0].getElementsByClassName(
                                "block"
                            )[1].attributes["value"].value;
                        if (linkValue === "null") {
                            _this.editor.$textContainerElem[0].getElementsByClassName(
                                "block"
                            )[1].attributes["value"].value = "";
                        }
                    }
                );
            });
        },
    },
};
</script>
<style lang="less" scoped>
#wangeditor {
    position: relative;
    z-index: 0;
    ::v-deep img {
        width: 100%;
    }
    ::v-deep p {
        margin: 0;
    }
    ::v-deep iframe {
        width: 100%;
    }
}
.uploadBox {
    ::v-deep .el-upload {
        width: 130px;
        height: 130px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        color: #aaa;
        cursor: pointer;
        text-align: center;
        position: relative;
        overflow: hidden;
        &:hover {
            color: #fb6638;
            border-color: #fb6638;
        }
        .el-icon-plus {
            font-size: 42px;
            line-height: 130px;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
//     ::v-deep .avatar-uploader-icon {
//         font-size: 28px;
//         color: #8c939d;
//         width: 178px;
//         height: 178px;
//         line-height: 178px;
//         text-align: center;
//     }
//     .avatar {
//         width: 178px;
//         height: 178px;
//         display: block;
//     }
// }
</style>
